<template>
  <div class>
    <el-dialog :visible.sync="dialog" width="60%" @close="handleClose">
      <div slot="title">
        <el-upload
          :action="host+'/admin/xy/upload/uploadImg'"
          :show-file-list="true"
          :on-success="uploadImgSuccess"
          :headers="token"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1MB</div>
        </el-upload>
      </div>
      <div class="pagin">
        <el-pagination
          style="float:right;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.start"
          :page-sizes="page.sizes"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.pages"
        ></el-pagination>
      </div>
      <div class="imglist" v-loading="loading">
        <el-card
          class="img-item"
          shadow="hover"
          v-for="(item,index) in imgList"
          :key="index"
          :body-style="{ padding: '0px' }"
        >
          <div class="card-main" @click="toAddImg(host+'/'+item.dir+'/'+item.fileName)">
            <div class="img-div">
              <img :src="host+'/'+item.dir+'/'+item.fileName" alt />
            </div>
            <div class="item-bot">
              <p class="img-title">
                <span :id="`span${item.id}`">{{item.title}}</span>
              </p>
            </div>
            <div v-if="host+'/'+item.dir+'/'+item.fileName==imgurl" class="zhezhao">
              <img src="@/assets/icon/dui.png" alt />
            </div>
          </div>
        </el-card>
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="doSel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from '@/utils/myAuth'
const hosts = require("@/settings");
// import img  from '@/assets/404_images/dui.png'
import { addImgList } from "@/api/material/img";
export default {
  components: {},
  data() {
    return {
      host: hosts.host,
      imgurl: "",
      page: {
        start: 1,
        limit: 12,
        sizes: [12, 24, 48],
      },
      dialog: false,
      imgList: [],
      loading: false,
      openType: 0,
    };
  },
  computed: {
    token(){
      var obj ={
        'bufan-token':getToken()
      }
      return obj
    }
  },
  created() {
    //   this.init
  },
  mounted() {},
  methods: {
    uploadImgSuccess(res) {
      this.init();
    },
    toAddImg(url) {
      this.imgurl = url;
    },
    handleSizeChange(v) {
      this.page.limit = v;
      this.init();
    },
    handleCurrentChange(v) {
      this.page.start = v;
      this.init();
    },
    handleClose() {
      this.dialog = false;
      this.imgurl = "";
    },
    openDialog(e) {
      this.init();
      this.dialog = true;
      if (e) {
        this.openType = e;
      }
    },
    init() {
      var obj = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search2,
      };
      this.loading = true;
      addImgList(obj).then((res) => {
        this.imgList = res.data.list;
        this.imgList.forEach((element) => {
          if (!element.title) {
            element.title = "未命名";
          }
        });
        this.page.pages = res.data.totalRow;
        this.loading = false;
      });
    },
    doSel() {
      if (this.openType == 0) {
         this.$emit("addCoverImg", this.imgurl);
         this.handleClose();
      } else {
        var str = `<img src="${this.imgurl}" >`;
        this.$emit("set-content", str);
        this.handleClose();
      }
    },
  },
};                                                                                                 
</script>

<style scoped lang="scss">
.pagin {
  overflow: hidden;
}
.imglist {
  display: flex;
  flex-wrap: wrap;
  .img-item {
    position: relative;
    width: 200px;
    margin: 8px;
    height: 250px;
    .card-main {
      padding: 20px;
      .zhezhao {
        position: absolute;
        left: 0;
        top: 0;

        font-size: 100px;
        text-align: center;
        line-height: 300px;
        z-index: 2;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        img {
          display: block;
          width: 150px;
          height: auto;

          margin: 50px auto;
        }
      }
    }
    .img-div {
      position: relative;
      // width: 90%;
      height: 180px;
      overflow: hidden;
      margin: 0 auto;
      img {
        position: absolute;
        object-fit: contain;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>
